<template>
  <div>
    <h2>资产风险分布</h2>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="item*percent" />
      <v-axis />
      <v-legend dataKey="item" />
      <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
      <v-coord type="theta" />
    </v-chart>
  </div>
</template>

<script>
  import DataSet from '@antv/data-set'


  const scale = [
    {
      dataKey: 'percent',
      min: 0,
      formatter: '.0%',
    },
  ]




export default {
  data() {
    return {
      scale,
      height: 300,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          },
        },
      ],
    }
  },
  props:{
    data:[]
  }
}
</script>
